<template>
    <div>
        <div class="head">
            <el-form inline :model="selectdata"
                     label-width="150px"
                     size="small"
            >
                <el-form-item>
                    <el-select v-model="selectdata.seatType" placeholder="请选择座位类型" @change="search">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="软座" value="1"></el-option>
                        <el-option label="硬座" value="2"></el-option>
                        <el-option label="卧铺" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="selectdata.trainNumber" @keyup.enter.native="search"
                              placeholder="请输入车次">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="selectdata.startingPoint" @keyup.enter.native="search"
                              placeholder="出发地">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="selectdata.endingPoint" @keyup.enter.native="search"
                              placeholder="目的地">
                    </el-input>
                </el-form-item>


                <el-form-item>
                    <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
                    <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>

            <div>
                <!-- 新增 -->
                <el-button size="small" plain type="primary" icon="el-icon-plus" @click="openDialog">新增<i
                        class="el-icon--right"></i>
                </el-button>
            </div>


        </div>


        <div>
            <!-- 表 -->
            <el-table :data="tableData" border v-loading="loading">
                <el-table-column label="ID" align="center" width="100">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="车次" align="center">
                    <template slot-scope="scope">G{{ scope.row.trainNumber }}</template>
                </el-table-column>

                <el-table-column label="车次类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.trainNumberType===2">动车</span>
                        <span v-if="scope.row.trainNumberType===1">高铁</span>
                        <span v-if="scope.row.trainNumberType===3">直达</span>
                        <span v-if="scope.row.trainNumberType===4">特快</span>
                        <span v-if="scope.row.trainNumberType===5">其他</span>
                    </template>
                </el-table-column>


                <el-table-column label="车票数量" align="center">
                    <template slot-scope="scope">{{ scope.row.ticketNumber }}</template>
                </el-table-column>


                <el-table-column label="座位类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.seatType===2">硬座</span>
                        <span v-if="scope.row.seatType===1">软座</span>
                        <span v-if="scope.row.seatType===3">卧铺</span>
                    </template>
                </el-table-column>


                <el-table-column label="出发地" align="center">
                    <template slot-scope="scope">{{ scope.row.startingPoint }}</template>
                </el-table-column>


                <el-table-column label="目的地" align="center">
                    <template slot-scope="scope">{{ scope.row.endingPoint }}</template>
                </el-table-column>

                <el-table-column label="途经站" align="center">
                    <template slot-scope="scope">{{ scope.row.passStation }}</template>
                </el-table-column>


                <el-table-column label="开始时间" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.startingTime | filterCtime }}</template>
                </el-table-column>

                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status===2" style="color: red">下线</span>
                        <span v-if="scope.row.status===1" style="color: green">在线</span>
                    </template>
                </el-table-column>

                <!--                <el-table-column label="创建时间" align="center" show-overflow-tooltip>-->
                <!--                    <template slot-scope="scope">{{ scope.row.createTime | filterCtime}}</template>-->
                <!--                </el-table-column>-->


                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">

                        <el-button plain size="mini" type="success"
                                   @click="handleCommand('edit',scope.row.id)">编辑
                        </el-button>
                        <el-button plain size="mini"
                                   type="danger" @click="handleCommand('del', scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>
            <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>

        <el-dialog
                title="新增车票"
                :visible.sync="open"
                width="30%"
                center>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="车次">
                    <el-input v-model="form.trainNumber"></el-input>
                </el-form-item>


                <el-form-item label="车票数量">
                    <el-input v-model="form.ticketNumber"></el-input>
                </el-form-item>

                <el-form-item label="价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>

                <el-form-item label="出发地">
                    <el-input v-model="form.startingPoint"></el-input>
                </el-form-item>

                <el-form-item label="目的地">
                    <el-input v-model="form.endingPoint"></el-input>
                </el-form-item>

                <el-form-item label="途经站">
                    <el-input v-model="form.passStation"></el-input>
                </el-form-item>

                <el-form-item label="座位类型">
                    <el-select v-model="form.seatType" placeholder="请选择车次类型">
                        <el-option label="软座" value="1"></el-option>
                        <el-option label="硬座" value="2"></el-option>
                        <el-option label="卧铺" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="车次类型">
                    <el-select v-model="form.trainNumberType" placeholder="请选择车次类型">
                        <el-option label="高铁" value="1"></el-option>
                        <el-option label="动车" value="2"></el-option>
                        <el-option label="直达" value="3"></el-option>
                        <el-option label="特快" value="4"></el-option>
                        <el-option label="其他" value="5"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开始日期">
                    <el-date-picker
                            v-model="form.startingTime"
                            type="datetime"
                            placeholder="选择日期时间"
                    >
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="open = false">取 消</el-button>
            <el-button type="primary" @click="addTicket">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="编辑车票"
                :visible.sync="updateDialogVisible"
                width="30%"
                center>
            <el-form ref="form" :model="updateForm" label-width="80px">
                <el-form-item label="车次">
                    <el-input v-model="updateForm.trainNumber"></el-input>
                </el-form-item>


                <el-form-item label="车票数量">
                    <el-input v-model="updateForm.ticketNumber"></el-input>
                </el-form-item>

                <el-form-item label="价格">
                    <el-input v-model="updateForm.price"></el-input>
                </el-form-item>

                <el-form-item label="出发地">
                    <el-input v-model="updateForm.startingPoint"></el-input>
                </el-form-item>

                <el-form-item label="目的地">
                    <el-input v-model="updateForm.endingPoint"></el-input>
                </el-form-item>


                <el-form-item label="途径站">
                    <el-input v-model="updateForm.passStation"></el-input>
                </el-form-item>

                <el-form-item label="车次类型">
                    <el-select v-model="updateForm.trainNumberType" placeholder="请选择车次类型">
                        <el-option label="高铁" value="1"></el-option>
                        <el-option label="动车" value="2"></el-option>
                        <el-option label="直达" value="3"></el-option>
                        <el-option label="特快" value="4"></el-option>
                        <el-option label="其他" value="5"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateTicket">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import moment from 'moment'
    import {list_ticket, delete_ticket, detail_ticket, update_ticket, add_ticket} from '@/api/ticket'

    export default {
        name: "ticket",
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                open: false,
                loading: false,
                tableData: [],
                value1: "",
                dateRange: [],
                formInline: {},
                updateDialogVisible: false,
                form: {},
                updateForm: {
                    trainNumber: ""
                },
                selectdata: {
                    seatType: "",
                    startingPoint:
                        "",
                    endingPoint:
                        "",
                    trainNumber:
                        "",
                }
            }
                ;
        },
        created() {
            this.getData();
        },
        methods: {
            /**
             * 重置搜索
             */
            clearForm() {
                this.selectdata = {};
                this.getData();
            },

            addTicket() {

                add_ticket(this.form).then(res => {
                    if (res.status === 200) {
                        this.$message.success("添加成功")
                        this.open = false;
                        this.getData();
                    }
                })
            },

            openDialog() {
                this.open = true;
            },

            updateTicket() {
                let params = this.updateForm;
                update_ticket(params).then(res => {
                    if (res.status === 200) {
                        this.updateDialogVisible = false;
                        this.getData();
                    }
                })
            },

            handleCommand(cmd, id) {
                if (cmd === 'edit') {
                    this.updateDialogVisible = true;
                    this.detailTicket(id);
                }
                if (cmd === 'del') {
                    this.deleteTicket(id)
                }
            },

            detailTicket(id) {
                let params = {};
                params.id = id;
                detail_ticket(params).then(res => {
                    console.log(res.data);
                    this.updateForm = res.data;
                })
            },


            /**
             * 搜索
             */
            search() {
                this.currentPage = 1;
                this.getData()
            },

            deleteTicket(id) {
                let params = {};
                params.id = id;
                delete_ticket(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("删除成功");
                        this.getData();
                    }
                })
            },


            /**
             * 获取数据
             */
            getData() {
                let params = {};
                params.seatType = this.selectdata.seatType;
                params.startingPoint = this.selectdata.startingPoint;
                params.endingPoint = this.selectdata.endingPoint;
                params.pageSize = this.pageSize;
                params.pageNumber = this.currentPage;
                list_ticket(params).then(res => {
                    if (res.status === 200) {
                        this.total = Number.parseInt(res.data.total);
                        this.tableData = res.data.list;
                        this.loading = false;
                    }

                })
            },
            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.getData();
            },
            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.getData();
            },
        },
        filters: {
            filterCtime(ctime) {
                // 过滤时间
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        }
    }
</script>

<style scoped>

</style>
